<template>
<el-card shadow="always">
    <!-- 面包屑 -->
    <div slot="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <!-- template不会被渲染 -->
      <template v-if="$route.params.id">
          <el-breadcrumb-item to="/article">内容管理</el-breadcrumb-item>
          <el-breadcrumb-item>修改文章</el-breadcrumb-item>
        </template>
      <el-breadcrumb-item v-else>发布文章</el-breadcrumb-item>
    </el-breadcrumb>
    </div>
    <!-- 表单 -->
    <el-form ref="formRef" label-width="120px" :model="articleForm" :rules="articleRules">
      <el-form-item label="标题：" prop="title">
        <el-input v-model="articleForm.title" placeholder="请输入文章标题" style="width:400px"></el-input>
      </el-form-item>
      <el-form-item label="频道：" prop="channel_id">
        <GeekChannel v-model="articleForm.channel_id" />
      </el-form-item>
      <el-form-item label="封面：" prop="cover">
        <el-radio-group @change="changeCoverType()" v-model="articleForm.cover.type">
          <el-radio :label="1">单图</el-radio>
          <el-radio :label="3">三图</el-radio>
          <el-radio :label="0">无图</el-radio>
          <el-radio :label="-1">自动</el-radio>
        </el-radio-group>
        <div v-if="articleForm.cover.type === 1 || articleForm.cover.type === 3">
          <!--
          el-upload 上传组件参数
          action 必选参数，上传的地址
          list-type 文件列表的类型 text（文本） picture(图片) picture-card(照片墙)
          -->
          <el-upload
          ref="uploadRef"
          action=""
          list-type="picture-card"
          :http-request="uploadFile"
          :limit="articleForm.cover.type"
          :on-remove="removeImage"
          :file-list="fileList">
          <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="内容：" prop="content">
        <div>
          <quillEditor @blur="checkCount()" v-model="articleForm.content"/>
        </div>
      </el-form-item>
      <el-form-item v-if="$route.params.id" label="">
        <el-button @click="onEdit(false)" type="primary">修改文章</el-button>
        <el-button @click="onEdit(true)">存入草稿</el-button>
      </el-form-item>
      <el-form-item v-else label="">
        <el-button @click="onSubmit(false)" type="primary">发表文章</el-button>
        <el-button @click="onSubmit(true)">存入草稿</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
// 导入富文本样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入富文本组件
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'PublishView',
  // 注册富文本组件
  components: {
    quillEditor
  },
  data () {
    // 自定义校验函数
    // 自定义校验函数的三个参数
    // 1.rule 当前校验规则
    // 2. value 此处用cover 校验结果
    // 3.callback校验提示
    // 4.校验回调
    const checkCoverFn = (rule, cover, callback) => {
      // 判断是否选择了封面
      if (cover.type === 1 && cover.images.length < 1) {
        // 提示用户
        return callback(new Error('请上传一张图片'))
      } else if (cover.type === 3 && cover.images.length < 3) {
        return callback(new Error('请上传三张图片'))
      }
      // 校验通过
      callback()
    }
    return {
      articleForm: {
        title: '', // 文章标题
        content: '', // 文章内容
        cover: {
          type: 1, // 封面类型 1 单图 3 三图 0 无图 -1 自动
          images: [] // 封面图片数组
        },
        channel_id: 0 // 文章频道频道id
      },
      // 校验规则
      articleRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 1, max: 100, message: '文章标题长度在1-100个字符之间', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请选择文章频道', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        cover: [
          // 自定义校验 图片的校验
          { validator: checkCoverFn, trigger: 'change' }
        ]
      }
    }
  },
  created () {
    // 判断是否为编辑文章
    if (this.$route.params.id) {
      // 获取文章详情
      this.getArticleDetail()
    }
  },
  // 组件内的路由导航守卫 只在复用的时候触发 不会跟created重复
  beforeRouteUpdate (to, from, next) {
    // 判断是否为编辑文章
    if (to.params.id) {
      // 获取文章详情
      this.getArticleDetail()
    } else {
      // 如果没有id，则为发布文章页，清空表单
      this.$refs.formRef.resetFields()
    }
    next()
  },
  computed: {
    fileList () {
      return this.articleForm.cover.images.map(url => ({ name: url, url: url, response: url }))
    }
  },
  methods: {
    async uploadFile (obj) {
      // console.log('文件' + file)
      // 创建fd对象
      const fd = new FormData()
      // 添加文件 注意文件名image是后端要求
      fd.append('image', obj.file)
      // 上传文件
      const res = await this.$http.post('/v1_0/upload', fd)
      // console.log(res)
      // 将图片地址添加到数组中
      this.articleForm.cover.images.push(res.data.data.url)
      this.$refs.formRef.validateField('cover')
      // 上传成功后返回图片地址，图片地址记录在file.response，用于删除，预览等业务
      return res.data.data.url
    },
    changeCoverType () {
      // 点击一图、三图、无图、自动切换时，清空图片数组 */
      this.$refs.uploadRef?.clearFiles()
      // 清空封面图片数组
      this.articleForm.cover.images = []
    },
    // 富文本组件失去焦点时，校验封面
    checkCount () {
      this.$refs.formRef.validateField('content')
    },
    // 上传时，移除图片，三图删一张就会提示
    // file是上传的文件，response是上传成功后返回的图片地址
    removeImage (file) {
      // 删除images数组中对应的图片
      this.articleForm.cover.images = this.articleForm.cover.images.filter(item => item !== file.response)
      // 主动触发校验
      this.$refs.formRef.validateField('cover')
    },
    // 发布文章和存草稿 判断是否为草稿 true是 false不是
    onSubmit (draft) {
      // 整个表单的校验
      this.$refs.formRef.validate(async (res) => {
        if (res) {
          // 发布文章和存草稿 /v1_0/mp/articles
          await this.$http.post('/v1_0/mp/articles', this.articleForm, {
            params: { draft }
          })
          // 提示用户
          this.$message.success(draft ? '保存草稿成功' : '发布文章成功')
          // 发布完成后跳转页面
          this.$router.push('/article')
        }
      })
    },
    // 修改文章和存草稿
    onEdit (draft) {
      this.$refs.formRef.validate(async (res) => {
        const id = this.$route.params.id
        if (res) {
          await this.$http.put(`/v1_0/mp/articles/${id}`, this.articleForm, { params: { draft } })
          this.$message.success('保存成功')
          this.$router.push('/article')
        }
      })
    },
    // 通过路由参数获取文章详情
    async getArticleDetail () {
      try {
        // 发送请求获取文章详情
        const res = await this.$http.get(`/v1_0/mp/articles/${this.$route.params.id}`)
        // console.log(res)
        this.articleForm = res.data.data
      } catch (error) {
        // 1.提示用户文章不存在
        this.$message.error('文章不存在')
        // 2.跳转回文章管理页面
        this.$router.push('/article')
      }
    }
  }
}
</script>
<style scoped>
/* ::v-deep本质就是[data-v-xxx]属性，可以调整到默认位置前面，实现样式穿透，深度样式选择器 */
::v-deep .ql-editor {
  min-height: 300px;
}
/* 关闭上传组件的动画效果 */
::v-deep .el-upload-list__item {
  transition: none;
}
</style>
